<script setup lang="ts">
import { getCurrentInstance, reactive, onMounted } from 'vue'
const { proxy } = getCurrentInstance()

/* ---- */
const slide = reactive({
  box: '',
  wd: 0,
  // ----
  tranStart: 0,
  startX: 0,
  disX: 0,
  startY: 0,
  disY: 0,
  deleteSlider: ''
})

/* ---- */
const getCurrencyInfo = () => {
  slide.wd = proxy.$refs.remove.offsetWidth
  slide.box = 'margin-right: -' + slide.wd + 'px;'
}
// ----
const handleStart = (e) => {
  slide.startX = e.touches[0].clientX
  slide.startY = e.touches[0].clientY
}
const handleMove = (e) => {
  const moveY = e.touches[0].clientY
  slide.disY = slide.startY - moveY
  // ----
  const moveX = e.touches[0].clientX
  slide.disX = slide.startX - moveX
  // ----
  if (Number(slide.tranStart) === 0) {
    if (Number(slide.disX) <= 0 || Math.abs(slide.disY) > 0) {
      slide.deleteSlider = 'transform: translateX(0);'
      // ----
      slide.tranStart = 0
    } else if (Number(slide.disX) > 0) {
      slide.deleteSlider = 'transform: translateX(-' + Number(slide.disX * 1) + 'px);'
      if (Number(slide.disX * 1) >= Number(slide.wd)) slide.deleteSlider = 'transform: translateX(-' + slide.wd + 'px);'
    }
  } else {
    if (Number(slide.disX) > 0) {
      slide.deleteSlider = 'transform: translateX(-' + slide.wd + 'px);'
    } else {
      slide.deleteSlider = 'transform: translateX(-' + Number(slide.disX * 1 + slide.tranStart) + 'px);'
    }
  }
}
const handleEnd = (e) => {
  const endX = e.changedTouches[0].clientX
  slide.disX = slide.startX - endX
  // ----
  if (Number(slide.disX * 1) > 0) {
    if (Number(slide.disX * 1 + slide.tranStart) < Number(slide.wd / 2)) {
      slide.deleteSlider = 'transform: translateX(0);'
      // ----
      slide.tranStart = 0
    } else {
      slide.tranStart = slide.wd
      // --大于一半 滑动到最大值--
      slide.deleteSlider = 'transform: translateX(-' + slide.wd + 'px);'
    }
  } else {
    slide.deleteSlider = 'transform: translateX(0);'
    // ----
    slide.tranStart = 0
  }
}
// ----
const getAuditFun = (type, item) => {
  switch (Number(type)) {
    case 1: {
      proxy.$emit('showDel')
      break
    }
  }
}

/* ---- */
onMounted(() => {
  getCurrencyInfo()
})
</script>

<template>
  <div class="slider" :style="slide.box">
    <div class="SLR-item" @touchstart="handleStart" @touchmove="handleMove" @touchend="handleEnd" :style="slide.deleteSlider">
      <div class="SLR-con">
        <!-- 插槽中放具体项目中需要内容 -->
        <slot></slot>
      </div>
      <div class="SLR-move" ref="remove" @click="getAuditFun(1)">删除</div>
    </div>
  </div>
</template>

<style scoped>
/*----*/
.slider { user-select: none; }
.SLR-item { position: relative; transition: all 300ms; display: flex; }
.SLR-con { flex: 1; }
.SLR-move { padding: 0 2rem; color: #ffffff; font-size: 1.6rem; background: #ff0000; display: flex; align-items: center; justify-content: center; }
</style>